<template>
	<view class="center-box">
		<view class="fiex-box pl30 pr30 flex justify-between align-center">
			<view class=""><i class="cuIcon-back f35" @click="back"></i></view>
			<view class="" @click="popupShow = true"><i class="cuIcon-moreandroid"></i></view>
		</view>

		<view class="head-center">
			<image v-if="userInfo.cover == ''" src="../../static/img.jpg" class="ww100 h560" mode="" @click="onTheCover = true"></image>
			<image v-else :src="userInfo.cover" class="ww100 h560" mode="" @click="onTheCover = true"></image>

			<view class="mt29 pl30 pr30">
				<view class=" flex align-center justify-between">
					<view class="flex align-center">
						<text class="black f32 mr30" style="font-weight: 600;">{{ userDeatil.nickName }}</text>
						<i class="cuIcon-male mr8" style="color: #40C6A8; font-weight: 700;" v-if="userDeatil.sex == 1"></i>
						<i class="cuIcon-female" style="color: #FF328E; font-weight: 700;" v-else></i>
						<text style="color: #666666; font-size: 22rpx;">25</text>
						<view class="bgc-border" v-if="userDeatil.isAuth == 0">未认证</view>

						<view class="bgc-border1" v-else>已认证</view>
					</view>
					{{userDeatil.id}}
					<view class="bgc-authentication">
						<text v-if="userDeatil.isFollow == 0" @click="followUser(0, userDeatil.id)">关注</text>
						<text v-if="userDeatil.isFollow == 1" @click="followUser(2, userDeatil.id)">已关注</text>
					</view>
				</view>

				<view class="mb25 flex align-center mt25">
					<view class="bgc">{{ userDeatil.headTitle }}</view>
					<!-- 会员等级 -1普通用户 0 普通会员 1普通VIP 2 高级VIP 3 钻石VIP 4至尊VIP -->
					<image v-if="userDeatil.menberLabel == -1" src="../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
					<image v-if="userDeatil.menberLabel == 0" src="../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
					<image v-if="userDeatil.menberLabel == 1" src="../../static/vip/putong.png" class="w110 h30 ml36" mode=""></image>
					<image v-if="userDeatil.menberLabel == 2" src="../../static/vip/gaoji.png" class="w110 h30 ml36" mode=""></image>
					<image v-if="userDeatil.menberLabel == 3" src="../../static/vip/zs.png" class="w110 h30 ml36" mode=""></image>
					<image v-if="userDeatil.menberLabel == 4" src="../../static/vip/zhizun.png" class="w110 h30 ml36" mode=""></image>
					<!-- <image src="../../static/vip/gaoji.png" class="w110 h40" mode=""></image> -->
				</view>
				<view class="f26" style="color: #333333;">
					<i class="cuIcon-title" style="color: #40C6A8;"></i>
					<text class="ml8 mr24">在线</text>
					<text>{{ km }}km {{ userDeatil.address }}</text>
				</view>
				<view class="mt21 mb29 w176" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{ userDeatil.dynamic }}</view>
				<view class="flex flex-wrap tag-text">
					<u-tag
						bg-color="#F5F5F0"
						border-color="#F5F5F0"
						color="#333"
						v-for="(item1, index) in userDeatil.apiUserDynamicTopics"
						:key="index"
						:text="item1.topic"
						style="margin: 0 24rpx 20rpx;"
						type="success"
					/>
				</view>

				<view class=" mt18">
					<view class="flex justify-between">
						<view class="f28">
							<i class="cuIcon-album mr10"></i>
							<text>个人相册（{{ total }}）</text>
						</view>
						<view class="">
							<text v-if="isUnlock == 0" @click="addPhone">未解锁</text>
							<text v-if="isUnlock == 1" @click="l.to('/pages/home/personagePhone?userId=' + userId)">已解锁</text>

							<i class="cuIcon-right"></i>
						</view>
					</view>

					<view class="flex pt30 pb40 flex-wrap">
						<image v-for="(item, index) in phoneList" :key="index" :src="item.albumImg" class="w215 h215 r10 mr25 img-mar" mode=""></image>
					</view>
				</view>
			</view>

			<view class="ww100 h20" style="background-color: #FAF7FA;"></view>

			<!-- 这里的技能和是否开通陪玩有关 -->
			<view class="pt30 pl30 pr30">
				<view class="flex f28 align-center">
					<image src="../../static/img/ps.png" class="w30 h30 mr13" mode=""></image>
					<text>技能</text>
				</view>

				<view class="flex pt39 ww100 " v-for="(item, index) in userPlatlist" :key="index">
					<image :src="item.kindImg" class="w100 h100 mr41 mt5" mode=""></image>
					<view class="ww88">
						<view class="flex justify-between ww100">
							<view class="">
								<view class="mb19">{{ item.kindName }}</view>
								<text class="" style="color: #999999;">{{ item.orderNum }}人下单</text>
							</view>
							<view class="bgc-order">下单</view>
						</view>
						<view class="mt26 flex mb18 align-center" style="color: #FF7C42 ;">
							<image src="../../static/img/price.png" class="w24 h28 mr13" mode=""></image>
							{{ item.price }}星
							<text style="color: #1F1F1F; font-size: 20rpx;">/次</text>
						</view>
					</view>
				</view>
			</view>

			<view class="ww100 pading pb30">
				<z-paging
					ref="paging"
					v-model="userPhoneList"
					@query="listUserPhone"
					:use-page-scroll="true"
					:default-page-size="5"
					loading-more-no-more-text="我也是有底线的！"
					:show-refresher-update-time="true"
					:refresher-update-time-key="'1'"
				>
					<view>
						<view class="pt39 pl28 flex r10" style="background-color: #FFFFFF;" v-for="(item, index) in userPhoneList" :key="index">
							<view class="w90 mr40" style="word-wrap:break-word; font-weight: 600;">{{ $u.timeFormat(item.addDate, 'yyyy/mm/dd') }}</view>
							<view class="" style="width: 78%;">
								<view class=" flex justify-between align-center">
									<text>{{ item.dynamic }}</text>
									<i class="cuIcon-more" @click="removeInit(item.id)" v-if="item.uid == userRmoveId"></i>
								</view>
								<view class=" mt30">
									<image
										v-for="(item1, index) in item.apiUserDynamicImgList"
										:key="index"
										@click="phoneInfo(item1.img)"
										:src="item1.img"
										class="w164 h164 r10 mr18"
										mode=""
									></image>
								</view>

								<view class="f22 flex justify-between mt18 mb40" style="color: #666666;">
									<view class=""></view>
									<view class="">
										<i class="cuIcon-like" v-if="item.isLove == 0" @click="addGoods(item.id)"></i>
										<i style="color:#FF2B8A;" class="cuIcon-likefill" v-else @click="addGoods(item.id)"></i>
										<text class="mr21 ml8">{{ item.loveNum }}</text>
										<i class="cuIcon-message"></i>
										<text class="mr21 ml8">{{ item.commentNum }}</text>
										<i class="cuIcon-favor" v-if="item.isCollect == 0" @click="dyn(item.id)"></i>
										<i class="cuIcon-favor" style="color:#FF2B8A;" v-else @click="dyn(item.id)"></i>
										<text class="ml8">{{ item.collectNum }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>

			<view class="apply flex justify-center">
				<view class="apply-btn" @click="adPrivate">申请约会</view>
				<view class="phone-btn" @click="voiceProp == true"><image src="../../static/img/phone.png" class="w42 h42" style="margin: auto;" mode=""></image></view>
				<!-- <view class="sp-btn">
					<image src="../../static/img/sp.png" class="w42 h42" style="margin: auto;" mode=""></image>
				</view> -->
			</view>
		</view>

		<u-popup v-model="onTheCover" mode="bottom" border-radius="30">
			<view class="mt38 text-center">
				<view class="h97 lh97 pop-border-bottom" @click="uploadPhone">更换封面</view>
				<view class="h97 lh97" @click="onTheCover = false">取消</view>
			</view>
		</u-popup>

		<u-popup v-model="popupShow" mode="bottom" height="300" border-radius="30">
			<view class="mt84 f28 flex justify-around" style="color: #333333;">
				<view class="text-center" @click="alterRemark">
					<view class="bgc-img"><image src="../../static/img/remark.png" class="w46 h46" mode=""></image></view>
					<view class="mt26">备注</view>
				</view>
				<view class="text-center">
					<view class="bgc-img"><image src="../../static/img/road.png" class="w46 h46" mode=""></image></view>
					<view class="mt26">拉黑</view>
				</view>
				<view class="text-center" @click="l.to('/pages/home/inform')">
					<view class="bgc-img"><image src="../../static/img/jubao.png" class="w46 h46" mode=""></image></view>
					<view class="mt26">举报</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="alterShow" mode="center" width="520" height="260" border-radius="30">
			<view class="mt54 f28 text-center" style="color: #333333;">
				<view class="">你还没有认证!</view>
				<button type="default" class="cu-btn btn-bgc f30"><text>去认证</text></button>
			</view>
		</u-popup>

		<u-popup v-model="voiceProp" mode="center" width="520" height="260" border-radius="30">
			<view class="mt54 f28 text-center" style="color: #333333;">
				<view class="">解锁语视频通话需要成为会员喔</view>
				<button type="default" class="cu-btn btn-bgc f30"><text>成为会员</text></button>
			</view>
		</u-popup>

		<u-popup v-model="propBtn" height="300" border-radius="30" mode="bottom">
			<view class="w100 hh100 pt99 pl66 flex">
				<view class="text-center w80" @click="removerShow = true">
					<view class="bgc-text mb25"><i class="cuIcon-delete f38" style="color: #40C6A8; margin: auto;"></i></view>
					<text class="">删除</text>
				</view>
				<!-- <view class="ml70">
					<view class="bgc-text mb25">
						<image src="../../static/img/jub.png" class="w50 h50" mode=""></image>
					</view>
					<text class="">
						举报
					</text>
				</view> -->
			</view>
		</u-popup>

		<u-modal v-model="removerShow" :show-cancel-button="true" @cancel="propBtn = false" :content="content" @confirm="removeList"></u-modal>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: 'transparent'

				// 导航栏背景图
				// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
				// 还可以设置背景图size属性
				// backgroundSize: 'cover',
			},
			onTheCover: false,
			popupShow: false,
			alterShow: false,
			voiceProp: false,
			propBtn: false,
			removerShow: false,
			content: '确定删除？',
			dynId: '',
			imgUrl: '',
			userInfo: {},
			userDeatil: {},
			total: '', // 总条数
			origins: '',
			km: '',
			userPlatlist: '',
			phoneList: [],
			isUnlock: '',
			userId: '',
			current: 1,
			userRmoveId: uni.getStorageSync('userInfo').id,
			userPhoneList: [],
			removeId: ''
		};
	},
	onShow() {},
	onLoad(e) {
		this.dynId = e.dynId;
		this.userId = e.userId;
		this.mapLocation();
		this.getUserListInfo();
		this.getUserInfo();
		this.userPlay(e.userId);
		this.unlockList(this.userId);
		this.listUserPhone(1, 5);
	},
	// onReachBottom() {
	// 	this.current++
	// 	this.listUserPhone(1, 5)
	// 	console.log('4444')
	// },
	methods: {
		async addGoods(id) {
			const res = await this.$u.post(`api/user/dyn/userDynLove`, {
				dynId: id,
				id: uni.getStorageSync('userInfo').id
			});
			this.l.msgg(res.msg);
			if (res.code == 200) {
				this.listUserPhone(1, 5);
			}
		},

		async dyn(id) {
			const res = await this.$u.post('api/user/dyn/userDynCollect', {
				dynId: id,
				id: uni.getStorageSync('userInfo').id
			});
			this.l.msgg(res.msg);
			if (res.code == 200) {
				this.listUserPhone(1, 5);
			}
		},

		mapLocation() {
			var that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					that.origins = res.longitude + ',' + res.latitude;
				}
			});
		},

		async getInstance() {
			const res = await this.$u.get('api/user/dyn/instance', {
				address: this.userDeatil.address,
				origins: this.origins
			});
			console.log('res.data==>', res);
			this.km = res.data / 1000;
		},

		back() {
			uni.navigateBack({
				delta: 1
			});
		},

		async adPrivate() {
			const res = await this.$u.post('api/user/meet/apply', {
				id: uni.getStorageSync('usreInfo').id,
				meetUid: Number(this.userId),
				status: 0
			});
			this.l.msgg(res.msg)
			if(res.code = 200) {
				this.l.to('/pages/home/private')
			}
		},

		uploadPhone() {
			uni.chooseImage({
				count: 1,
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: this.UPLOADFILE, //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						// formData: {
						//     'user': 'test'
						// },
						success: uploadFileRes => {
							this.onTheCover = false;
							var url = JSON.parse(uploadFileRes.data);
							this.imgUrl = url.data;
							this.alterPhone(this.imgUrl);
						}
					});
				}
			});
		},

		alterRemark() {
			this.l.to('/pages/home/alterRemark?userId=' + this.userId);
		},

		async getUserListInfo() {
			const res = await this.$u.get(`api/user/dyn/userDynDetail/${this.dynId}`);
			this.userDeatil = res.data;
			console.log('this.userDeatil==>', this.userDeatil);
			this.getInstance();
		},

		async alterPhone(url) {
			const res = await this.$u.put('api/user/modifyCover', {
				cover: url
			});
			this.l.msgg(res.msg);
		},

		async getUserInfo() {
			const res = await this.$u.get('api/user/queryUser');
			this.userInfo = res.data;
		},

		async followUser(index, id) {
			const res = await this.$u.post('api/follow/userFollow', {
				followType: index,
				followUid: id
			});
			this.l.msgg(res.msg);
			if (res.code == 200) {
				this.getUserListInfo();
			}
		},

		async userPlay(id) {
			const res = await this.$u.get(`api/user/play/userPlay/${id}`);
			this.userPlatlist = res.data;
		},

		async unlockList(id) {
			const res = await this.$u.get(`api/user/unlock/unlockList/${id}`);
			this.total = res.data.list.length;
			if (this.total == 1) {
				this.phoneList = res.data.list;
			} else if (this.total == 2) {
				this.phoneList = res.data.list;
			} else if (this.total >= 3) {
				this.phoneList.push(res.data.list[0]);
				this.phoneList.push(res.data.list[1]);
				// this.phoneList.push(res.data.list[2])
			}

			this.isUnlock = res.data.isUnlock;
		},

		async addPhone() {
			var arr = [];
			var obj = {
				albumId: 0,
				unlockUid: Number(this.userId)
			};
			arr.push(obj);

			const res = await this.$u.post('api/user/unlock/add', {
				apiUserUnlockList: arr
			});

			this.l.msgg(res.msg);
			if (res.code == 200) {
				this.unlockList(this.userId);
				this.l.to('/pages/home/personagePhone');
			}
		},

		async listUserPhone(pageNo, pageSize) {
			let obj = {
				page: pageNo,
				page_size: pageSize
			};
			const res = await this.$u.get(`api/user/dyn/userDyn/${pageNo}/${pageSize}/${this.userId}`);
			if (!res.code) return;
			console.log('res: ', res);
			this.$refs.paging.complete(res.data);
		},

		removeInit(id) {
			this.propBtn = true;
			this.removeId = id;
		},

		async removeList() {
			this.propBtn = false;
			const res = await this.$u.delete(`api/user/dyn/delUerDyn/${this.removeId}`);
			this.l.msgg(res.msg);
			if (res.code == 200) {
				this.listUserPhone(1, 5);
			}
		},

		phoneInfo(img) {
			this.l.previewImage(Array(img));
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/.fiex-box {
	position: fixed;
	top: 67rpx;
	width: 100%;
	z-index: 999;
	color: #333333;
	background-color: transparent !important;
}

.bgc-text {
	border-radius: 10rpx;
	padding: 14rpx 25rpx;
	color: #666666;
	font-size: 24rpx;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	border-radius: 40rpx;
	background-color: #f0f0f0;
}

.center-box {
	width: 100%;
	height: 100%;

	.head-center {
		padding-bottom: 140rpx;

		.bgc-border {
			padding: 4rpx 7rpx;
			border-radius: 6rpx;
			color: #4d4d4d;
			margin-left: 29rpx;
			font-size: 22rpx;
			border: 1rpx solid #b3b3b3;
		}

		.bgc-border1 {
			padding: 4rpx 7rpx;
			border-radius: 6rpx;
			color: #fdd226;
			margin-left: 29rpx;
			font-size: 22rpx;
			border: 1rpx solid #fdd226;
		}

		.bgc-authentication {
			padding: 14rpx 38rpx;
			color: #ffffff;
			border-radius: 10rpx;
			background-color: #020002;
		}

		.bgc {
			padding: 5rpx 11rpx;
			color: #40c6a8;
			font-size: 22rpx;
			border-radius: 30rpx;
			margin-right: 14rpx;
			border: 2rpx solid #40c6a8;
		}

		.img-mar:nth-child(3n) {
			margin-right: 0;
		}
	}

	.bgc-tag {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		border-radius: 6px;
		background: #f5f5f0;
	}

	.tag-text {
		flex-wrap: wrap;
	}

	.bgc-order {
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background: #ffffff;
		color: #b127c1;
		box-shadow: 0px 0px 8rpx 0px rgba(209, 40, 229, 0.12);
		border-radius: 25rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
	}

	.pading {
		padding: 20rpx 30rpx;
		background-color: #faf7fa;
	}

	.apply {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		line-height: 120rpx;
		z-index: 999;
		background-color: #ffffff;
	}

	.apply-btn {
		width: 460rpx;
		height: 80rpx;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx 25rpx;
		font-size: 30rpx;
		border-radius: 40rpx;
		background-color: #000000;
	}

	.phone-btn {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin: 20rpx 35rpx;
		display: flex;
		justify-content: center;
		background-color: #000000;
	}

	.sp-btn {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		margin-top: 20rpx;
		justify-content: center;
		background-color: #000000;
	}
}

.pop-border-bottom {
	color: #000000;
	font-size: 28rpx;
	font-family: PingFang SC;
	border-bottom: 4rpx solid #fafafa;
}

.bgc-img {
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	// text-align: center;
	display: flex;
	justify-content: center;
	border-radius: 40rpx;
	background-color: #f7f7f7;

	image {
		margin: auto;
	}
}

.btn-bgc {
	color: #ffffff;
	margin-top: 50rpx;
	margin-bottom: 60rpx;
	background-color: #000000;
}
</style>
